'use strict'
const { View } = window.QUI
import style from './css.css'
// window.dataSource = dataSource
class TaskList extends React.Component {
  constructor (props) {
    super(props)
    this.state = {}
  }

  _renderProgress = this._renderProgress.bind(this)

  _renderProgress (progress) {
    // 计算进度条 通过父元素长度的百分比设置
    if (!progress) { return false }
    return (<View className={ style.taskProgressShow1 } style={{ width: `${progress * 100}%` }}></View>)
  }

  _handleGoTask = this._handleGoTask.bind(this)
  _handleGoTask (href) {
    console.log(href)
    if (href) {
      prompt('__native_call=>' + JSON.stringify({
        method: 'reqNative',
        action: 'deeplink',
        modul: 'jump',
        args: {
          'url': href
        }
      }))
    }
    else {
      window.Qapp.showToast({ content: '未返回链接' })
    }
  }

  render () {
    const { task = {}} = this.props
    const { task_name, task_progress, task_goal, task_detail, task_qb, task_link, task_link_desc } = task

    const progress = task_progress / task_goal

    return (
      <View className={ style.taskListItem }>
        <View className={ style.taskProgress }>
          <View className={ progress === 1 ? style.taskNameOver : style.taskName }>{task_name}</View>
          <View className={ style.taskProgressShow } >
            {this._renderProgress(progress)}
            <View className={ style.taskProgressNum }>{task_progress}/{task_goal}</View>

          </View>
          <View className={ style.textO2 }>{task_detail}</View>
        </View>
        <View className={ style.taskPlay } tap={() => this._handleGoTask(task_link)}>
          <View className={ progress === 1 ? style.taskQBOver : style.taskQB } tap={() => this._handleGoTask(task_link)}>+{task_qb}</View>
          <View className={ style.taskGo } tap={() => this._handleGoTask(task_link)}>{task_link_desc}</View>
        </View>
      </View>
    )
  }
}
export default TaskList
